import React, { useEffect } from 'react';
import { Form, Input, Select, Dialog, Radio } from 'tdesign-react';
import { JupiterUser } from '../../../types/userTypes';
import { encryptPasswordAuto } from '../../../tools/passwordEncryp';

const { FormItem } = Form;
const { Option } = Select;
const { Group: RadioGroup } = Radio;

interface Props {
  visible: boolean;
  onClose: () => void;
  onSubmit: (data: Partial<JupiterUser>) => void;
  initialData?: Partial<JupiterUser>;
  title: string;
}
const defaultValues = {
  gender: 'male',
  isActive: true,
};
export default function UserForm({
  visible,
  onClose,
  onSubmit,
  initialData = {},
  title,
}: Props) {
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {

      form.reset();
      //form.setFieldsValue(initialData || {}); // 每次打开时同步数据
    } else {
    }
  }, [visible, initialData, form]);

  return (
    <Dialog
      closeOnOverlayClick={false}
      header={title}
      visible={visible}
      onClose={onClose}
      onConfirm={() => form.submit()}
      width={700}
    >
      <Form
        form={form}
        resetType="initial"
        layout="vertical"
        onSubmit={async (context) => {
          const { fields } = context as unknown as { fields: Partial<JupiterUser> };
          // 密码加密处理
          if (fields.password) {
            fields.password = await encryptPasswordAuto(fields.password);
          }
          onSubmit(fields);
        }}
      >
        <div className="grid grid-cols-2 gap-6">
          <FormItem
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
            initialData={initialData.username || ""}
          >
            <Input placeholder="请输入用户名" />
          </FormItem>

          <FormItem
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input type="password" placeholder="请输入密码" />
          </FormItem>

          <FormItem
            label="昵称"
            name="nickname"
            rules={[{ required: true, message: '请输入昵称' }]}
            initialData={initialData.nickname || ""}
          >
            <Input placeholder="请输入昵称" />
          </FormItem>

          <FormItem
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱格式' }
            ]}
            initialData={initialData.email || ""}
          >
            <Input type="text" placeholder="请输入邮箱" />
          </FormItem>

          <FormItem
            label="手机号"
            name="phone"
            rules={[
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
            ]}
            initialData={initialData.phone || ""}
          >
            <Input type="tel" placeholder="请输入手机号" />
          </FormItem>

          <FormItem label="性别" name="gender" initialData={initialData.gender || "male"}>
            <RadioGroup>
              <Radio value="male">男</Radio>
              <Radio value="female">女</Radio>
            </RadioGroup>
          </FormItem>

          <FormItem label="状态" name="isActive" initialData={initialData.isActive ?? true}>
            <RadioGroup>
              <Radio value={true}>启用</Radio>
              <Radio value={false}>禁用</Radio>
            </RadioGroup>
          </FormItem>
        </div>
      </Form>
    </Dialog >
  );
}
